<!-- 首页 -->
<template>
	<view class="">
		<view class="">
			<!-- 轮播图 -->
			<!-- <u-swiper :list="list1" height="570" imgMode="scaleToFill"></u-swiper> -->
			<view class="index-swiper-box">
				<u-swiper :list="banner" keyName="image" height="570" imgMode="widthFix" :lazy-load="true"></u-swiper>
				<!-- <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="scaleToFill"></image> -->
				<!-- iocn 区域 -->
				<view class="index-nav-box">
					<view class="index-nav-icon-box" v-for="(item,index) in iconBox" :key="index" @click="goHref(item.href,item.type)">
						<view class="index-nav-icon">
							<image :src="item.imgSrc" mode="widthFix" :lazy-load="true"></image>
						</view>
						<view class="">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="index-content" v-if="educationObj.list && educationObj.list.length>0">
					<!-- 教育专区 -->
					<commonCard :dataObj="educationObj"></commonCard>
				</view>
				<view class="index-content-business" v-for="(item,index) in businessObj.list" @click="goHref('pages/iconpage/list','business')">
					<!-- 商务服务 -->
					<image :src="item.image" mode="widthFix" :lazy-load="true"></image>
				</view>
				<view class="index-content" v-if="productObj.list && productObj.list.length>0">
					<view class="index-content-padding">
						<!-- 产品专区 -->
						<commonCard :dataObj="productObj" :className="goodsClass"></commonCard>
					</view>
				</view>
				<view class="index-content" v-if="projectObj.list && projectObj.list.length>0">
					<view class="index-content-padding">
						<!-- 项目专区 -->
						<commonCard :dataObj="projectObj" :className="proClass"></commonCard>
					</view>
				</view>
				<view class="index-content" v-if="financingObj.list && financingObj.list.length>0">
					<view class="index-content-padding">
						<!-- 融资专区 -->
						<commonCard :dataObj="financingObj" :className="finClass" :isShow="false"></commonCard>
					</view>
				</view>
			</view>
			<shopro-float-btn></shopro-float-btn>
		</view>
	</view>
</template>

<script>
	import shGoodsCard from './components/sh-goods-card.vue';
	import commonCard from './components/common-card.vue';
	export default {
		components: {
			shGoodsCard,
			commonCard
		},
		data() {
			return {
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				scrollTop: 0,
				banner: [],
				educationObj: {},
				financingObj:{},
				projectObj:{},
				productObj:{},
				businessObj:{},
				goodsClass:'index-content-left',
				finClass:'index-content-fin',
				proClass:'index-content-pro',
				iconBox: [{
					imgSrc: '../../static/images/icon/icon_education.png',
					title: '教育专区',
					href: 'pages/iconpage/list',
					type:'education'
				}, {
					imgSrc: '../../static/images/icon/icon_business.png',
					title: '商务服务',
					href: 'pages/iconpage/list',
					type:'business'
				}, {
					imgSrc: '../../static/images/icon/icon_product.png',
					title: '产品专区',
					href: 'pages/iconpage/list',
					type:'product'
				}, {
					imgSrc: '../../static/images/icon/icon_project.png',
					title: '项目专区',
					href: 'pages/iconpage/list',
					type:'project'
				}, {
					imgSrc: '../../static/images/icon/icon_financing.png',
					title: '融资专区',
					href: 'pages/iconpage/list',
					type:'financing'
				}]
			};
		},
		computed: {},
		onShow() {
			this.enable = true;
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			this.getData()
		},
		methods: {
			goHref(href,name){
				console.log(href)
				uni.navigateTo({
					url:href+'?name='+name,
				})
			},
			getData(){
				uni.showLoading({
					title: '正在加载中。。。',
					mask: true
				})
				this.$http('common.main', {
					
				}).then(res => {
					if (res.code === 1) {
						this.educationObj = res.data.jiaoyu;
						this.financingObj = res.data.rongzi;
						this.projectObj = res.data.xiangmu;
						this.productObj = res.data.chanpin;
						this.businessObj = res.data.shangwu;
						this.banner = res.data.banner.list.list;
						console.log(res.data.banner.list.list,'banner')
					}
				}).finally(() => {
					uni.hideLoading()
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.index-swiper-box {
		width: 100%;
		// height: 570rpx;
		z-index: 1;
		position: relative;
		padding-bottom: 20rpx;
	}

	.index-nav-box {
		display: flex;
		justify-content: space-between;
		padding: 50rpx 46rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		font-size: 24rpx;
		margin-top: -65rpx;
		position: relative;
		left: 0;
		top: 0;
		z-index: 3;

		.index-nav-icon-box {
			width: 96rpx;
			text-align: center;
			color: #001226;
		}

		.index-nav-icon {
			width: 84rpx;
			height: 84rpx;
			margin: 0 auto 12rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}

	.index-content {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		.index-content-title {
			display: flex;
			justify-content: space-between;
			font-size: 36rpx;
			// margin-bottom: 30rpx;
			color: #001226;
			font-weight: 600;
		}

		.index-content-all {
			width: 92rpx;
			height: 44rpx;
			border-radius: 22rpx;
			border: 2rpx solid #E5E5E5;
			font-size: 24rpx;
			color: #001226;
			line-height: 44rpx;
			text-align: center;
			font-weight: 400;
		}

		.index-content-img-box {
			display: flex;
			justify-content: space-between;
			border-radius: 30rpx;
			flex-wrap: wrap;
		}

		.index-content-img {
			width: 330rpx;
			margin-top: 30rpx;
			image {
				width: 100%;
				height: 330rpx;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				vertical-align: top;
			}
		}

		.index-content-word {
			background-color: #fff;
			padding: 20rpx 20rpx 30rpx;
			border-radius: 0rpx 0rpx 30rpx 30rpx;

			.index-content-img-title {
				font-size: 32rpx;
				color: #001226;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.index-content-img-subtitle {
				font-size: 24rpx;
				font-weight: 400;
				color: #8E8E8E;
				margin-bottom: 30rpx;
			}

			.index-content-img-price {
				font-size: 28rpx;
				color: #FF0015;
				font-weight: 600;

				span {
					font-size: 24rpx;
					color: #B5B5B5;
					margin-left: 10rpx;
					text-decoration: line-through;
					font-weight: 400;
				}

				span::before {
					content: '￥';
					font-size: 20rpx;
				}
			}

			.index-content-img-price::before {
				content: '￥';
				font-size: 24rpx;
			}
		}
	}

	.index-content-business {
		padding: 0 30rpx;
		height: 182rpx;
		border-radius: 30rpx;
		margin: 30rpx 0 30rpx;

		image {
			border-radius: 30rpx;
			background: linear-gradient(180deg, #D24347 0%, #A62022 100%);
		}
	}

	.index-content-padding {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}
</style>
